<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
   /*
   用.class、id选择器或者层次选择器

   结构伪类选择器
   定义： 伪类：条件
   1  如何选中<ul>的第一个子元素
   ul li:first-child{
     background: #244db2;
   }
   2  如何选中<ul>的最后一个个子元素
   ul li:last-child{
     background: #b3d4fc;
   }
   */
   /*
   3.直接选中p1：定位父元素，选择当前的第一个元素
   该方法是选择当前p元素的父级元素中，第一个元素p
   若是第一个p标签之前还有其他标签，则不生效。
   一定按照父级标签排序！！！！！
      p:nth-child(1){
     background: #1d5394;
   }

   4.选择父元素的中P元素的第几个
   p:nth-of-type(1){
     background: #244db2;
   }
   */2

   p:nth-of-type(1){
     background: #244db2;
   }
  </style>

</head>
<body>
    <h1>adad</h1>
    <p >p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li class="active">li1</li>
        <li>li2</li>
        <li>li3</li>

    </ul>
</body>
</html>
